<template>
  <div class="login-container">
    <bgHeader title="账号登录" />
    <div class="body-container">
      <!-- 表单验证 -->
      <van-form ref="loginFrom" @submit="onSubmit">
        <van-field
          border
          v-model="user.username"
          name="用户名"
          placeholder="请输入账号"
          :rules="UserRules.username"
        />
        <van-field
          border
          v-model="user.password"
          type="password"
          name="密码"
          placeholder="请输入密码"
          :rules="UserRules.password"
        />
        <div style="margin: 16px">
          <van-button
            class="login-btn"
            block
            type="primary"
            native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <div class="bottom" @click="$router.push('/registe')">
        还没有账号，去注册~
      </div>
    </div>
  </div>
</template>

<script>
import { adminLogin } from '@/api/user.js'
import { mapMutations } from 'vuex'
import bgHeader from '@/components/gbhearder'
export default {
  name: 'LoginIndex',
  components: {
    bgHeader
  },
  props: {},
  data() {
    return {
      // 提交登录表单
      user: {
        username: '',
        password: ''
      },
      // 表单验证
      UserRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'onChange' },
          {
            pattern: /[0-9A-Za-z]{6,8}/,
            message: '用户名为6-8位的字母和数字',
            trigger: 'onChange'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'onChange' },
          {
            pattern: /[0-9A-Za-z]{6,12}/,
            message: '密码为6-12位的字母和数字',
            trigger: 'onChange'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['setToken']),
    // 提交表单
    async onSubmit() {
      this.$toast.loading({
        message: '登入中...',
        forbidClick: true,
        duration: 0
      })
      // try {
      //   await this.$refs.loginFrom.validate();
      //   // this.$toast.success("验证成功");
      // } catch (err) {
      //   this.$toast.fail(err);
      // }
      try {
        // 登入发起请求
        const { data: res } = await adminLogin(this.user)
        if (res.status === 200) {
          this.setToken(res.body.token)
          this.$toast.success('登入成功！')
          setTimeout(() => {
            this.$router.back()
          }, 1000)
        } else if (res.status === 400) {
          this.$toast.fail('账号或密码错误')
        }
      } catch (err) {
        this.$toast.fail('登录失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  padding: 160px 0;
  .body-container {
    height: 504px;
    .van-field {
      color: #000;
      height: 120px;
      font-size: 34px;
    }
    .login-btn {
      background-color: #1cb676;
      height: 100px;
      font-size: 36px;
    }
    .bottom {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 28px;
    }
  }
}
</style>
